<template>
    <div>
        <!--查询框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="流量池编号:">
                <el-input v-model="formInline.poolNo" placeholder="请输入编号"></el-input>
            </el-form-item>
            <el-form-item label="通道:">
                <el-select v-model="formInline.channelCode" placeholder="请选择">
                    <el-option v-for="item in formInline.channel_list" :key="item.code" :value="item.code" :label="item.text"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="流量池名称:">
                <el-input v-model="formInline.poolName" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <!--表格-->
        <el-table id="flowPool" :data="tableData" height="500px" max-height="500px" size="500px" :highlight-current-row="true" style="width: 100%" class="c-no-wrap">
            <el-table-column align="center" label="编号" prop="poolCode"></el-table-column>
            <el-table-column align="center" label="流量池卡号" prop="poolNo"></el-table-column>
            <el-table-column align="center" label="流量池名称" prop="poolName"></el-table-column>
            <el-table-column align="center" label="通道" prop="channelName"></el-table-column>
            <el-table-column align="center" label="套餐" prop="comboName"></el-table-column>
            <el-table-column align="center" label="已使用" prop="used"></el-table-column>
            <el-table-column align="center" label="总流量" prop="total"></el-table-column>
            <el-table-column align="center" label="剩余百分比" prop="leftPercent"></el-table-column>
            <el-table-column align="center" label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div>
            <pageHelper :current-page="currentPage" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange"></pageHelper>
        </div>

        <el-dialog :title="flowPoolName" :visible.sync="dialogVisible1" width="800px">
            <template>
                <el-table :data="detailData" height="300px" max-height="300px" size="300px" :highlight-current-row="true" style="width: 100%" class="c-no-wrap">
                    <el-table-column align="center" label="日期" prop="comboDate"></el-table-column>
                    <el-table-column align="center" label="套餐" prop="comboName"></el-table-column>
                    <el-table-column align="center" label="已使用" prop="used"></el-table-column>
                    <el-table-column align="center" label="剩余" prop="left"></el-table-column>
                    <el-table-column align="center" label="总流量" prop="total"></el-table-column>
                </el-table>
                <el-button @click="closeDialog1">关闭</el-button>
            </template>
        </el-dialog>

        <el-dialog title="流量池修改" :visible.sync="dialogVisible" width="500px">
            <template>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="流量池编号:">
                        <span>{{ form.poolCode }}</span>
                    </el-form-item>
                    <el-form-item label="流量池名称:">
                        <el-input v-model="form.poolName" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="editChannelName">确认修改</el-button>
                        <el-button @click="closeDialog">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>
    </div>

</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    import {mytips} from '@/module/tools';
    import pageHelper from '../common/pageHelper';

    document.title='实名列表';
    export default {
        name: 'flowPoolList',
        components: {pagination,pageHelper},
        data() {
            return {
                formInline: {
                    poolNo: '',
                    poolName:'',
                    channelCode: '',
                    channel_list: [
                        {text: '全部',code: ''}
                    ]
                },
                form: {
                    poolCode: '',
                    poolName: ''
                },
                flowPoolName: '',
                //表格数据
                tableData: [],
                detailData: [],
                totalPage: 0,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: null,
                dialogVisible: false,
                dialogVisible1: false
            };
        },

        mounted() {
            this.getAllChannel();
            this.getData();
        },
        methods: {

            //获取通道
            getAllChannel() {
                axios({
                    url: API_PATH + '/am/findAllChannel',
                }).then(res => {
                    if (res.data.code == 0) {
                        this.formInline.channel_list = this.formInline.channel_list.concat(res.data.data.map(item => (
                            {
                                text: item.channelName,
                                code: item.channelCode
                            }
                        )))
                    }
                })
            },

            /*翻页跳转处理，传入页数*/
            getData: function (page,size) {
                page = page || 1;
                size = size || 10;

                let target = document.getElementById('flowPool');
                this.loading = this.$loading({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0,1)',
                    target: target,
                    spinner: 'el-icon-loading'
                });
                axios.get(
                    API_PATH + '/pool/query',
                    {
                        params: {
                            page: page,
                            size: size,
                            poolNo: this.formInline.poolNo,
                            poolName: this.formInline.poolName,
                            channelCode: this.formInline.channelCode
                        }
                    }
                ).then(res => {
                        this.loading.close();
                        if (res.data.code == 0) {
                            this.tableData = res.data.data.list;
                            this.totalPage = Math.ceil(res.data.data.total / size);
                            this.total = Math.ceil(res.data.data.total);
                            this.pageSize = size;
                            this.currentPage = page;
                        }
                    },
                    xhr => this.loading.close()
                );
            },
            //每页显示多少条
            handleSizeChange(size) {
                this.pageSize = size;
                this.getData(1,this.pageSize);
            },
            //当前页
            handleCurrentChange(page) {
                this.getData(page,this.pageSize)
            },
            //编辑流量池名称
            handleClick(row) {
                this.form.poolCode = row.poolCode;
                this.form.poolName = row.poolName;
                this.dialogVisible = true;
            },
            editChannelName() {
                axios.post(
                    API_PATH + '/pool/update',
                    {
                        poolCode: this.form.poolCode,
                        poolName: this.form.poolName
                    }
                ).then(res => {
                    if (res.data.code == 0) {
                        mytips('修改成功');
                        this.closeDialog();
                        this.getData();
                    }
                })
            },
            closeDialog() {
                this.form.poolCode = '';
                this.form.poolName = '';
                this.dialogVisible = false;
            },

            //详情
            handleDetail(row) {
                axios.get(
                    API_PATH + '/poolFlow/getByPoolCode?poolCode=' + row.poolCode,
                ).then(res => {
                    if (res.data.code == 0) {
                        this.detailData = res.data.data;
                        this.flowPoolName = row.poolName;
                        this.dialogVisible1 = true;
                    }
                });
            },
            closeDialog1() {
                this.detailData = [];
                this.dialogVisible1 = false;
                this.flowPoolName = '';
            }
        }
    }
</script>
